<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀</title>
  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="../css/public.css">
</head>
<body>
  <!-- 头部 -->
  <header>
    <!-- logo -->
    <div class="logo">穆土科技</div>
    <div class="user">
      作者：
      曾小藩
    </div>
  </header>

  <!-- 内容部分 -->
  <section class="center">
    <img src="../images/wzry01.jpg" alt="赵云图片" class="img-100">

    <h2 class="title">web端王者荣耀官网</h2>

    <!-- 介绍 -->
    <div class="introduce">
      <p class="br">背景：2020的夏天, 正在网上学习前端知识, 于是在 哔哩哔哩 又看到了一个视频(up：全栈之巅),
        那个视频是 模仿王者荣耀的移动端官网 的视频, 里面主要使用 vue/cli、scss、Element-ui
        axios、还有 vue的第三方插件；来搭建 web端, 后台管理页面 和 服务端（处理数据）。
      </p>
      <p>第一次看到时, 想学, 但是在第一个视频就频繁卡壳；自己认为自己的技术不够, 于是就再去
        提供技术, 再来做这个项目；在今年的夏天, 终于可以上手这个项目了。这个项目是这样的：
      </p>
    </div>

    <br>

    <!-- 功能 -->
    <div class="function">
      <h3 class="br">web端：</h3>
      <div class="img br">
        <img src="../images/web1.png" alt="">
        <img src="../images/web2.png" alt="">
        <img src="../images/web3.png" alt="">
        <img src="../images/web4.png" alt="">
      </div>
      <p>
        这个页面有：
      </p> 
      <ul>
        <li>- 轮播图</li>
        <li>- 图标导航</li>
        <li>- 新闻资讯</li>
        <li>- 英雄列表</li>
      </ul>
      <p>- 使用 vue/cli 来搭建项目, 样式方面使用 scss编译器, 定义一些公共的变量, 然后循环创建多个样式, 这样可以方便 样式的创建 和 样式的复用性；</p>
      <p>- 创建公共组件, 做到组件的复用, 使用 作用域插槽 来传递数据, 使组件的使用更加灵活；</p>
      <p>- 使用 axios 来发送异步请求, 设置同样的请求路径, 减短请求路径的书写；</p>
    
      <br>
      <br>

      <h3 class="br">后台管理页面 :</h3>
      <div class="admin-img">
        <img src="../images/admin1.png" alt="">
        <img src="../images/admin2.png" alt="">
        <img src="../images/admin3.png" alt="">
        <img src="../images/admin4.png" alt="">
      </div>
      <br>
      <br>
      <p>管理页面有以下功能：</p>
      <ul>
        <li>英雄职业管理</li>
        <li>物品管理</li>
        <li>英雄管理</li>
        <li>文章管理</li>
        <li>广告位管理</li>
        <li>管理员管理</li>
      </ul>
      <br>
      <p>使用技术：</p>
      <p>- 使用 axios 发送请求,设置 请求拦截器 来设置 请求头, 携带登录时, 返回的 token 数据, 存储到本地；</p>
      <p>- 使用 vue 脚手架设置,设置 路由守卫, 如果客户访问后台页面, 就判断用户本地是否有 token, 如果有就放行；如果没有就跳转到 登录页面；如果访问 登录页面就不拦截；</p>
      <p>- 使用 Element-UI 来搭建页面结构；</p>
      <p>- 使用路由来管理页面的跳转；</p>
      <br>
      <br>

      <h3 class="br">serve 端：</h3>
      <ul>
        <li>- 职业集合</li>
        <li>- 英雄集合</li>
        <li>- 装备集合</li>
        <li>- 管理员集合</li>
        <li>- 广告位集合</li>
        <li>- 文章集合</li>
      </ul>
      <p>- 使用 node 搭建服务器，拦截 Mongodb 操作数据库。</p>
    
      <br>
      <br>
    </div>
      <p>请多指教。</p>
  </section>
</body>
</html>